<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <base href="<%=request.getContextPath()%>/">
    <meta charset="UTF-8">
    <title>预约管理 - 医疗预约系统后台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="statics/css/hisStyle.css">
    <link rel="stylesheet" href="statics/css/common-styles.css">
</head>
<body>
<%@include file="../common/sidebar.jsp"%>
<div class="main-content">
    <%@include file="../common/top.jsp"%>
    <div class="function-page">
        <div class="page-header">
            <h1>预约管理</h1>
        </div>
        
        <div class="action-bar">
            <a href="<%=request.getContextPath()%>/appointment/toAdd" class="btn btn-primary">
                <i class="fas fa-plus"></i> 新增预约
            </a>
        </div>

        <!-- 查询表单 -->
        <div class="search-filter">
            <form id="appointmentFindForm" action="<%=request.getContextPath()%>/appointment/find" method="get" class="search-form">
                <div class="form-group">
                    <label for="patientName">患者姓名：</label>
                    <input type="text" id="patientName" name="patientName" value="${param.patientName}" class="form-control"/>
                </div>
                <div class="form-group">
                    <label for="deptId">科室：</label>
                    <select id="deptId" name="deptId" class="form-control">
                        <option value="">请选择</option>
                        <c:forEach items="${departmentList}" var="department">
                            <option value="${department.deptId}"
                                    <c:if test="${param.deptId eq department.deptId}">selected</c:if>>
                                ${department.deptName}
                            </option>
                        </c:forEach>
                    </select>
                </div>
                <div class="form-group">
                    <label for="appointmentDate">预约日期：</label>
                    <input type="date" id="appointmentDate" name="appointmentDate" value="${param.appointmentDate}" class="form-control"/>
                </div>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-search"></i> 查询
                </button>
            </form>
        </div>

        <div class="data-section">
            <table class="data-table">
            <thead>
            <tr>
                <th>患者姓名</th>
                <th>科室</th>
                <th>预约日期</th>
                <th>预约时段</th>
                <th>医生姓名</th>
                <th>预约状态</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${pageInfo.list}" var="appointment">
                <tr>
                    <td>${appointment.patientName}</td>
                    <td>
                            ${appointment.visit.department.deptName}
                    </td>
                    <td>${appointment.visit.visitDate}</td>
                    <td>${appointment.visit.timeSlot}</td>
                    <td>${appointment.visit.doctorName}</td>
                    <td>
                        <c:choose>
                            <c:when test="${appointment.status eq 0}"><span class="status-badge status-pending">待就诊</span></c:when>
                            <c:when test="${appointment.status eq 1}"><span class="status-badge status-active">已完成</span></c:when>
                            <c:when test="${appointment.status eq 2}"><span class="status-badge status-deleted">已取消</span></c:when>
                            <c:otherwise><span class="status-badge">未知</span></c:otherwise>
                        </c:choose>
                    </td>
                    <td>${appointment.createTime}</td>
                    <td class="operations">
                        <!-- 仅对"待确认"状态显示操作按钮 -->
                        <c:if test="${appointment.status eq 0}">
                            <button class="btn btn-success btn-sm" onclick="confirmAppointment(${appointment.appointmentId})"><i class="fas fa-check"></i> 确认</button>
                            <button class="btn btn-danger btn-sm" onclick="cancelAppointment(${appointment.appointmentId})"><i class="fas fa-times"></i> 取消</button>
                        </c:if>
                        <!-- 已处理的预约不显示操作按钮 -->
                        <c:if test="${appointment.status ne 0}">
                            - <!-- 无操作 --></c:if>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
        </div>
        
        <div class="data-section">
            <div class="pagination-container">
                <div class="pagination-info">
                    总计 ${pageInfo.total} 条记录，当前第 ${pageInfo.pageNum} / ${pageInfo.pages} 页
                </div>
                <div class="pagination">
                    <a href="javascript:goToUrl(1)" class="pagination-link" ${pageInfo.pageNum == 1 ? 'disabled' : ''}><i class="fas fa-angle-double-left"></i> 首页</a>
                    <a href="javascript:goToUrl(${pageInfo.pageNum-1})" class="pagination-link" ${pageInfo.pageNum == 1 ? 'disabled' : ''}><i class="fas fa-angle-left"></i> 上一页</a>
                    <span class="pagination-info">每页 ${pageInfo.pageSize} 条</span>
                    <a href="javascript:goToUrl(${pageInfo.pageNum+1})" class="pagination-link" ${pageInfo.pageNum == pageInfo.pages ? 'disabled' : ''}><i class="fas fa-angle-right"></i> 下一页</a>
                    <a href="javascript:goToUrl(${pageInfo.pages})" class="pagination-link" ${pageInfo.pageNum == pageInfo.pages ? 'disabled' : ''}><i class="fas fa-angle-double-right"></i> 尾页</a>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    // 分页跳转函数
    function goToUrl(pageNum) {
        if (pageNum < 1) pageNum = 1;
        if (pageNum > ${pageInfo.pages}) pageNum = ${pageInfo.pages};

        const patientName = document.querySelector('input[name="patientName"]').value;
        const deptId = document.querySelector('select[name="deptId"]').value;
        const appointmentDate = document.querySelector('input[name="appointmentDate"]').value;

        let url = 'appointment/find?pageNum=' + pageNum;
        if (patientName) url += '&patientName=' + encodeURIComponent(patientName);
        if (deptId) url += '&deptId=' + encodeURIComponent(deptId);
        if (appointmentDate) url += '&appointmentDate=' + encodeURIComponent(appointmentDate);

        window.location.href = "<%=request.getContextPath()%>/" + url;
    }

    // 确认预约
    function confirmAppointment(appointmentId) {
        if (confirm("确定要确认该预约吗？")) {
            window.location.href = "<%=request.getContextPath()%>/appointment/confirm?appointmentId=" + appointmentId;
        }
    }

    // 取消预约
    function cancelAppointment(appointmentId) {
        if (confirm("确定要取消该预约吗？")) {
            window.location.href = "<%=request.getContextPath()%>/appointment/cancel?appointmentId=" + appointmentId;
        }
    }
</script>
</body>
</html>